// 基础地址
const BASE_URL = 'http://110.41.43.118:3008';

let oUsername = document.querySelector('.username');
let oUsernameMsg = document.querySelector('.username-msg');
let oCode = document.querySelector('.code');
let oCodeMsg = document.querySelector('.code-msg');
let oCodeBtn = document.querySelector('.code-btn');
let oCodeTxt = document.querySelector('.code-txt');
let oPassword = document.querySelector('.password');
let oPasswordMsg = document.querySelector('.password-msg');
let aPwdStrengthSpan = document.querySelectorAll('.pwd-strength span');
let oPwdConfirm = document.querySelector('.pwd-confirm');
let oPwdConfirmMsg = document.querySelector('.confirm-msg');
let oAgreement = document.querySelector('.agreement');
let oRegisterBtn = document.querySelector('.register-btn');

// 当前元素状态
let usernameStatus = false;
let codeStatus = false;
let pwdStatus = false;
let confirmStatus = false;
let agreementStatus = false;


// 验证交互效果方法
function msgRender(obj = null, objMsg = null, isShow = 'block', color = 'red', txt = '', borderColor = 'transparent'){
	objMsg.style.display = isShow;
	objMsg.style.color = color;
	objMsg.innerHTML = txt;
	obj.style.borderColor = borderColor;
};

// 验证用户名
oUsername.onblur = function(){
	// 前端要做校验 3-12位字母数字下划线组成的用户名
	let re = /^[0-9a-zA-Z_]{3,12}$/g;
	if(!re.test(oUsername.value)){
		msgRender(oUsername, oUsernameMsg, 'block', 'red', '用户名必须为3-12位字母数字下划线组成', 'red');
		usernameStatus = false;
		return;
	};
	
	// 上面正则通过，查看后台数据有没有被注册
	wj.ajax({
		method: 'post',
		url: BASE_URL + '/api_user',
		data: {username: oUsername.value, status: 'check'},
		success(res){
			console.log(res);
			if(res.code != 0){
				console.log(res);
				msgRender(oUsername, oUsernameMsg, 'block', 'red', '用户名已存在', 'red');
				usernameStatus = false;
				return;
			};
			
			// 通过验证
			msgRender(oUsername, oUsernameMsg, 'block', 'green', '用户名可用', 'transparent');
			usernameStatus = true;
		}
		
	})
	
};

// 累加验证码结果
let codeStr = '';

// 验证验证码
oCode.onkeyup = function(){
	// console.log(codeStr);
	//验证
	if(codeStr.toLowerCase() != this.value.toLowerCase()){
		msgRender(oCode, oCodeMsg, 'block', 'red', '验证码错误', 'red');
		codeStatus = false;
		return;
	};
	msgRender(oCode, oCodeMsg, 'block', 'green', '验证码通过', 'transparent');
	codeStatus = true;
};

// 键盘抬起事件
oPassword.onkeyup = function(){
	// 验证非数字
	let re = /^\d{6,12}$/g;
	if(!re.test(this.value)){
		msgRender(oPassword, oPasswordMsg, 'block', 'red', '密码必须为6-12位数字', 'red');
		// 验证强中弱
		strengthColor();
		pwdStatus = false;
		return;
	};
	
	// 通过了正则使用 强中弱
	msgRender(oPassword, oPasswordMsg, 'none', 'red', '密码必须为6-12位数字', 'transparent');
	// 验证强中弱
	strengthColor();
	// 弱中强颜色封装
	function strengthColor(color1 = '#fff', color2 = '#fff', color3 = '#fff'){
		aPwdStrengthSpan[0].style.background = color1;
		aPwdStrengthSpan[1].style.background = color2;
		aPwdStrengthSpan[2].style.background = color3;
	}
	
	switch(this.value.length){
		case 6:
		case 7:
			strengthColor('#E93C3C', '#fff', '#fff');
			break;
		case 8:
		case 9:
		case 10:
			strengthColor('#E93C3C', '#E5C200', '#fff');
			break;
		case 11:
		case 12:
			strengthColor('#E93C3C', '#E5C200', '#00D2E5');
			break;	
	}
	
	pwdStatus = true;
};

// 确认密码
oPwdConfirm.onblur = function(){
	// 验证
	if(this.value != oPassword.value){
		msgRender(oPwdConfirm, oPwdConfirmMsg, 'block', 'red', '两次密码不一致', 'red');
		confirmStatus = false;
		return;
	};
	msgRender(oPwdConfirm, oPwdConfirmMsg, 'block', 'green', '', 'transparent');
	confirmStatus = true;
};

//条款
oAgreement.onchange = function(){
	console.log(this.checked);
	agreementStatus = this.checked;
};

// 点击事件
oRegisterBtn.onclick = function(){
	
	if(!usernameStatus){
		oUsername.focus();
		msgRender(oUsername, oUsernameMsg, 'block', 'red', '用户名不可用', 'red');
		return;
	};
	
	if(!codeStatus){
		oCode.focus();
		msgRender(oCode, oCodeMsg, 'block', 'red', '请输入正确的验证码', 'red');
		return;
	};
	
	if(!pwdStatus){
		oPassword.focus();
		msgRender(oPassword, oPasswordMsg, 'block', 'red', '请输入正确的密码', 'red');
		return;
	};
	
	if(!confirmStatus){
		oPwdConfirm.focus();
		msgRender(oPwdConfirm, oPwdConfirmMsg, 'block', 'red', '密码不一致', 'red');
		return;
	};
	
	if(!agreementStatus){
		alert('请勾选协议');
		// msgRender(oAgreement, oUsernameMsg, 'block', 'red', '用户名不可用', 'red');
		return;
	};
	
	// 真正注册了
	wj.ajax({
		method : 'post',
		url: BASE_URL + '/api_user',
		data: {username: oUsername.value, password: oPassword.value, status: 'register'},
		success(res){
			console.log(res);
			if(res.code != 0){
				console.log(res);
				return;
			};
			
			// 跳转到登录页面
			window.location.href = 'login.html';
		}
	})
	
};

// 验证码效果
(function(){
	
	// 解构
	let {random} = Math;

	
	// 默认要显示验证码
	let codeArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U','V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
	
	// 调用一次
	getCode();
	
	// 点击换一张
	oCodeBtn.onclick = getCode;
	
	//生成验证码方法
	function getCode(){
		// 清除验证码
		codeStr = '';
		// 清除验证码框的内容
		oCode.value = '';
		//换容器背景图
		oCodeTxt.style.backgroundPosition = `${random() * 700}px ${random() * 400}px`;
		// 清除验证码
		oCodeTxt.innerHTML = '';
		//四位
		for(let i = 0; i < 4; i++){
			// 创建DOM
			let span = document.createElement('span');
			// 随机 0-61
			span.innerHTML = codeArr[parseInt(random() * 62)];
			codeStr += span.innerHTML;
			
			// 随机颜色
			span.style.color = `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`;
			// 随机字体大小 12 -22
			span.style.fontSize = parseInt(random() * 13 + 10) + 'px';
			// 斜体
			span.style.fontStyle = random() < 0.5 ? 'italic' : 'none';
			span.style.fontWeight = random() < 0.5 ? 'bold' : 'normal';
			// 添加到容器
			oCodeTxt.appendChild(span);
		};
		
	};
	
	
})();